echarts基本应用

您所在的位置：网站首页 › echarts 设置y轴刻度 › echarts基本应用

echarts基本应用

2023-11-23 00:53| 来源: 网络整理| 查看: 265

搞数据展示，很多朋友都会用到免费的echarts，echarts官网也有很详细、很nice的文档。下面我根据我这几天的需求汇总一下经常用到的一些文档

1、axisLabel:{轴文字，在xAxis或者yAxis根下　　　　show: true,　　　　textStyle:{　　　　　　color: '#333', //更改坐标轴文字颜色　　　　　　fontSize : 12 //更改坐标轴文字大小　　　　} }2、grid:{图标距离周边的距离，有top、left、right、boottom，可用百分百　　left:'1%'　　right:'1%',　　bottom:'1%',　　top:'1%',　　containLabel: true }3、nameTextStyle:{//轴标题，在xAxis或yAxis根下　　color:'#333',　　fontSize:12 }4、axisTick:{//轴刻度，在xAxis或yAxis根下　　show:false}5、axisLine:{//轴线，在xAxis或yAxis根下　　lineStyle:{　　　　width:1,　　　　color:'#e5e5e5',　　　　type:'solid'　　} }6、splitLine:{//轴网格,在xAxis或yAxis根下　　show:true,　　lineStyle:{//网格样式　　　　color:['#e5e5e5'] }}7、itemStyle:{折线图，在series下　　 normal:{　　　　lineStyle:{//曲线样式　　　　　　color:'#4986F7'　　　　},　　　label:{ // bar时目录放在series的根目录下　　　　 show:true,　　　　 position:'top',//值显示在上面,inside在里面　　　　 textStyle:{　　　　　　color:'#333',　　　　　　fontSize:12　　　　 }　　　} }}8、tooltip:{//鼠标悬浮提示　　position:['50%','50%'],//悬浮位置　　formatter:function(params){　　　　return params.name + '' + params.seriesName + ': ' + params.value;　　}}

上面是经常用到的api。下面贴完整的代码：

　　 $(document).ready(function(){ 　　varfunnelMainEcharts=echarts.init(document.getElementById('funnelEchart'));　　　　 funnelMainOption={ 　　tooltip: { 　 trigger: 'axis',//也可以用formatter　　　　　　　　 axisPointer: {//坐标轴指示器，坐标轴触发有效　　　　　　　　　　 type: 'shadow'//默认为直线，可选为：'line'|'shadow' } 　　　　　　　　 }　　　　, grid: { left: '1%', right: '10%', bottom: '3%', top: '10%', containLabel: true }, xAxis: { type: 'category', name: '日期', data: xArray, axisLabel: { //x轴文字show: true, textStyle: { color: '#333', //更改坐标轴文字颜色fontSize: 12//更改坐标轴文字大小 } }, axisTick: { //x轴刻度show: false }, axisLine: { //x轴线lineStyle: { width: 1, color: '#E5E5E5', type: 'solid' } }, nameTextStyle: { //x轴名称color: '#333', fontSize: 12 } }, yAxis: { type: 'value', name: '新增人数', splitNumber: 5, axisLabel: { show: true, textStyle: { color: '#333', //更改坐标轴文字颜色fontSize: 12//更改坐标轴文字大小 } }, axisTick: { "show": false }, axisLine: { lineStyle: { width: 1, color: '#E5E5E5', type: 'solid' } }, nameTextStyle: { color: '#333', fontSize: 12 }, splitLine: { //x轴网格show: true, lineStyle: { color: ['#E5E5E5'] } } }, series: [{ data: yArray, type: 'line', name: '新增人数', //curName+'(新增人数)', itemStyle: { //曲线样式 normal: { lineStyle: { color: '#4986F7' } } } }] }; funnelMainEcharts.setOption(funnelMainOption,true);　　 })

【本文地址】

echarts基本应用

echarts基本应用

今日新闻

推荐新闻